<template>
	<view>
		<!-- 头部 -->
		<view class="header-view"
			style="background: url('../../static/image/01.png') no-repeat;background-size: 100% 100%;">
			<view class="padding-30">
				<view class="flex-alignItems-center" style="margin-top: 90rpx;">
					<view class="fontSize-15 color-000 margin-right10" v-if="userinfo.id">{{userinfo.hospital}}</view>
					<view class="fontSize-15 color-000 margin-right10" v-else 
					@click="$tools.navigateTo('/pages/mine/mine-list/personal-data')">请选择院区</view>
					<u-icon name="arrow-down-fill" color="#4D4D4D" size="15"></u-icon>
				</view>
				<view class="fontSize-30 color-fff fontWeight-bold margin-top30">
					快速问诊
				</view>
				<view class="header-btn">守护您的健康</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="padding-30">
			<!-- 消息 -->
			<view class="flex-between news-view" @click="$tools.navigateTo('/pages/index/news')">
				<view class="flex-alignItems-center">
					<image class="img-44 margin-right20" src="../../static/image/02.png" mode=""></image>
					<view class="fontSize-15 color-000">复诊提醒</view>
				</view>
				<view class="fontSize-15 color-0165FD">查看详情</view>
			</view>

			<!-- 基础功能 -->
			<view class="basic-view margin-30-0">
				<view class="flex-alignItems-center margin-bottom30">
					<image class="img-32 margin-right20" src="../../static/image/03.png" mode=""></image>
					<view class="fontSize-15 color-000">基础功能</view>
				</view>
				<view class="flex-between">
					<view class="left-basic-view flex-justAliCenter-column margin-right20"
						@click="addjiuzhen" v-if="jiuzhenList.length == 0">
						<image class="img-68 margin-bottom20" src="../../static/image/04.png" mode=""></image>
						<view class="fontSize-18 color-000 margin-bottom20 fontWeight-bold">添加就诊人</view>
						<view class="fontSize-13 color-000">您还没有就诊人请先添加</view>
					</view>
					<view class="left-basic-view flex-justAliCenter-column margin-right20" v-else>
					    <view class="fontSize-18 color-000 margin-bottom20 fontWeight-bold">{{jiuzhenInfo.name}}</view>
						<view class="fontSize-13 color-999 margin-bottom20">证件号:</view>
						<view class="fontSize-13 color-999 margin-bottom20">{{jiuzhenInfo.card}}</view>
						<view class="left-basic-btn flex-center" @click="$tools.navigateTo('/pages/index/patient-list')">切换就诊人</view>
					</view>
					<view class="">
						<view class="flex-alignItems-center right-basic-view margin-bottom20" @click="$tools.navigateTo('/pages/index/doctor-info?id='+jiuzhenInfo.id)">
							<image class="img-44 margin-right20" src="../../static/image/05.png" mode=""></image>
							<view class="fontSize-15 color-000">管理医生</view>
						</view>
						<view class="flex-alignItems-center right-basic-view" @click="$tools.navigateTo('/pages/mine/mine-list/health-records/health-records')">
							<image class="img-44 margin-right20" src="../../static/image/06.png" mode=""></image>
							<view class="fontSize-15 color-000">健康档案</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 生活质量量表 -->
			<view class="weight-for-view flex-between margin-bottom30">
				<view class="fontSize-20 color-fff fontWeight-bold">生活质量量表</view>
				<view class="weight-form-btn">前往填写</view>
			</view>

			<!-- 您近期做过肠菌移植？ -->
			<view class="img-view1 margin-bottom30"
				style="background: url('/static/image/07.png') no-repeat;background-size: 100% 100%;"
				@click="junShow = true">
				<view class="submit-btn">前往提交</view>
			</view>

			<!-- 资讯列表 -->
			<view class="padding-30 border-radius20 bg-fff">
				<view class="flex-between margin-bottom30"
					@click="$tools.navigateTo('/pages/index/science-Information')">
					<view class="flex-alignItems-center">
						<image class="img-32 margin-right20" src="../../static/image/08.png" mode=""></image>
						<view class="fontSize-15 color-000">科普资讯</view>
					</view>
					<view class="flex-alignItems-center">
						<view class="fontSize-13 color-999 margin-right10">查看全部</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
				</view>

				<view class="flex-between margin-bottom30" v-for="(item,index) in list" :key="index"
				@click="$tools.navigateTo('/pages/index/science-Information-info?id='+item.id)">
					<view class="margin-right20">
						<view class="fontSize-16 color-000 fontWeight-bold text-ellipsis margin-bottom20">
							{{item.title}}
						</view>
						<view class="fontSize-15 color-999">
							发布时间：{{item.createtime}}
						</view>
					</view>
					<image class="img-160 border-radius10" :src="item.image" mode=""></image>
				</view>

				<u-empty v-if="list.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
					width="150px" height="150px" text="列表为空" textSize="18">
				</u-empty>
				<view style="padding-bottom: 100rpx;">
					<u-loadmore v-if="loading" status="loading" />
					<u-loadmore v-if="isLastPage" status="nomore" />
				</view>
			</view>
		</view>

		<!-- 是否已做过菌群移植弹窗 -->
		<u-popup :show="junShow" :round="20" @close="junShow = false" closeable>
			<view class="popup-view">
				<view class="fontSize-15 color-000 margin-bottom30">
					请填写
				</view>
				<view class="margin-bottom30">
					<view class="fontSize-15 color-000 margin-bottom30">是否已做过菌群移植</view>
					<view class="flex-alignItems-center">
						<view class="flex-alignItems-center" style="width: 150rpx;">
							<view class="margin-right20">
								<image v-if="false" class="img-44" src="../../static/image/check.png" mode=""></image>
								<image v-else class="img-44" src="../../static/image/checked.png"></image>
							</view>
							<view class="fontSize-15 color-000">是</view>
						</view>
						<view class="flex-alignItems-center" style="width: 150rpx;">
							<view class="margin-right20">
								<image v-if="false" class="img-44" src="../../static/image/check.png" mode=""></image>
								<image v-else class="img-44" src="../../static/image/checked.png"></image>
							</view>
							<view class="fontSize-15 color-000">否</view>
						</view>
					</view>
				</view>
				<view class="margin-bottom30">
					<view class="fontSize-15 color-000" style="width: 150rpx;margin-bottom: 30rpx;">请选择日期</view>
					<view class="input-view flex-alignItems-center">
						<view class="fontSize-13 color-000 flex1" style="text-align: right;" v-if="readCreatetime"
							@click="dateShow = true">
							{{readCreatetime}}
						</view>
						<view class="fontSize-13 color-999 flex1" style="text-align: left;" v-else
							@click="dateShow = true">
							请选择
						</view>
					</view>
				</view>
				<view class="btn50-0165FD-15ffffff flex-center" @click="submitSign">
					提交
				</view>
			</view>
		</u-popup>

		<!-- 添加就诊人提示 -->
		<u-popup :show="jiuzhenShow" :round="20" mode="center" :safeAreaInsetBottom="true">
			<view class="jiuzhen-popup-view">
				<view class="fontSize-16 color-000 fontWeight-bold margin-bottom30 text-center">提示</view>
				<view class="fontSize-15 color-000 text-center">请先添加就诊人</view>
				<view class="flex-center margin-top50">
					<view class="jiuzhen-popup-btn flex-center margin-right20" @click="jiuzhenShow = false">取消</view>
					<view class="jiuzhen-popup-btn1 flex-center" @click="goToDoctor">去添加</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				junShow: false, // 菌群移植弹窗 
				jiuzhenShow: false, // 就诊人弹窗
				page: 1,
				limit: 10,
				list: [],
				isLastPage: false,
				loading: false,
				userinfo:{} ,// 个人中心
				jiuzhenList:[], // 就诊人列表
				jiuzhenInfo:{}, //就诊人详情
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getUserinfo()
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			this.articleList()
			if(uni.getStorageSync('token')){
				this.getSickList()
			}
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.articleList().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.articleList();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 跳转到添加就诊人列表
			goToDoctor(){
				this.$tools.navigateTo('/pages/index/add-patient')
			},
			// 显示就诊弹窗
			addjiuzhen(){
				this.jiuzhenShow = true
			},
			// 获取就诊人列表
			async getSickList(){
				let res = await this.$http.post(this.$api.sick_list,{},{token:true})
				if(res.code ==1){
					this.jiuzhenList = res.data
					// 判断缓存是否有就诊人
					if(uni.getStorageSync('patlient-item')){
						this.jiuzhenInfo = uni.getStorageSync('patlient-item')
						this.jiuzhenInfo.card = this.jiuzhenInfo.card.replace(/(\w{2})\w*(\w{2})/, '$1**************$2');
					}else{
						// 就诊人列表有值
						if(this.jiuzhenList.length!==0){
							this.getSickInfo()
						}
					}
				}
			},
			// 获取就诊人信息
			async getSickInfo(id){
				let res = await this.$http.post(this.$api.sick_detail,{id:id},{token:true})
				if(res.code == 1){
					if(res.data){
						// 如果有默认就诊人
						this.jiuzhenInfo = res.data
						this.jiuzhenInfo.card = this.jiuzhenInfo.card.replace(/(\w{2})\w*(\w{2})/, '$1**************$2');
						uni.getStorageSync('patlient-item',res.data)
					}else{
						// 没有默认就诊人选择列表第一个
						this.jiuzhenInfo = this.jiuzhenList[0]
						this.jiuzhenInfo.card = this.jiuzhenInfo.card.replace(/(\w{2})\w*(\w{2})/, '$1**************$2');
						uni.getStorageSync('patlient-item',this.jiuzhenInfo)
					}
				}
			},
			// 获取个人信息
			async getUserinfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				if(res.code ==1){
					this.userinfo = res.data
				}
			},
			async articleList() {
				let res = await this.$http.post(this.$api.article_list, {
					page: this.page,
					limit: this.limit,
					type:1
				}, {
					token: true
				})
				this.list = [...this.list, ...res.data]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left-basic-btn{
		width: 240rpx;
		height: 60rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #0165FD;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 1rpx solid #0165FD;
	}
	.jiuzhen-popup-btn1 {
		width: 210rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #0165FD;
	}

	.jiuzhen-popup-btn {
		width: 210rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #0165FD;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1rpx solid #0165FD;
	}

	.jiuzhen-popup-view {
		width: 400rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		background: linear-gradient(to bottom, #E8F1FF 0%, #FFFFFF 100%);
	}

	.input-view {
		// width: 600rpx;
		// background-color: #F7F7F7;
		border: 1px solid #DBDBDB;
		padding: 20rpx;
		font-size: 15px;
		border-radius: 14rpx;
		color: #000000;
	}

	.submit-btn {
		width: 168rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #08B0C4;
		background: #FFFFFF;
		border-radius: 30rpx;
		position: absolute;
		bottom: -5rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.img-view1 {
		width: 100%;
		height: 140rpx;
		position: relative;
	}

	.weight-form-btn {
		width: 168rpx;
		height: 46rpx;
		font-size: 15px;
		color: #0165FD;
		text-align: center;
		line-height: 46rpx;
		border-radius: 30rpx;
		background: linear-gradient(273deg, #FFDD7F 0%, #FEFFF8 100%);
	}

	.weight-for-view {
		padding: 30rpx;
		height: 80rpx;
		background: linear-gradient(175deg, #5D96EC 0%, #266AD2 100%);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.right-basic-view {
		padding: 20rpx;
		width: 250rpx;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(1, 101, 253, 0.18);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.left-basic-view {
		width: 330rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(1, 101, 253, 0.18);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.basic-view {
		padding: 30rpx;
		background: linear-gradient(180deg, #F1F6FE 0%, #FFFFFF 100%);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.news-view {
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(1, 101, 253, 0.18);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin-top: -80rpx;
	}

	.header-view {
		width: 100%;
		height: 480rpx;
		overflow: hidden;
	}

	.header-btn {
		width: 216rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #0165FD;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		margin-top: 20rpx;
	}
</style>